<script setup lang="ts">
import {ref} from 'vue'
import {DCaret, Delete, FullScreen, Plus, Refresh, Setting} from "@element-plus/icons-vue";
import { useRouter } from 'vue-router';

const router = useRouter();
// 定义 props
const props = defineProps({
  listType: {
    type: String,
    required: true
  }
});

const centerDialogVisible = ref(false)

function handleClick() {
  // centerDialogVisible.value = true
   // 根据 listType 执行不同的操作
   switch (props.listType) {
    case 'image':
      // 处理图片列表的新增操作
      router.push('/image/add');
      break;
    case 'users':
      // 处理用户列表的新增操作
      console.log('处理用户列表的新增操作');
      break;
    default:
      console.log('未知列表类型');
  }
}



</script>

<template>
  <el-dialog
      v-model="centerDialogVisible"
      title="Warning"
      width="500"
      align-center
  >
    <span>Open the dialog from the center from the screen</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="centerDialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>
  <div class="action flex">
    <div class="left">
      <el-button type="primary" @click="handleClick" plain :icon="Plus">
        <i class="el-icon-plus"></i>
        新增
      </el-button>

      <!-- <el-button type="danger" @click="handleClick" plain :icon="Delete">
        删除
      </el-button> -->
    </div>
    <div class="right">
      <!--      刷新、行间距、设置、全屏、打印-->
      <el-button-group class="ml-4">
        <el-button :icon="Refresh" @click="handleClick" circle text/>
        <el-button :icon="DCaret" @click="handleClick" circle text/>
        <el-button :icon="Setting" @click="handleClick" circle text/>
        <el-button :icon="FullScreen" @click="handleClick" circle text/>
        <el-button @click="handleClick" circle text>
          <el-icon>
            <svg t="1712747715150" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="7006" width="128" height="128">
              <path
                  d="M694.857143 243.983673H329.142857c-11.493878 0-20.897959-9.404082-20.897959-20.897959s9.404082-20.897959 20.897959-20.897959h365.714286c11.493878 0 20.897959 9.404082 20.897959 20.897959s-9.404082 20.897959-20.897959 20.897959z"
                  fill="#333333" p-id="7007"></path>
              <path
                  d="M820.244898 459.755102H203.755102V177.632653c0-45.97551 37.616327-83.591837 83.591837-83.591837h449.306122c45.97551 0 83.591837 37.616327 83.591837 83.591837v282.122449zM245.55102 417.959184h532.89796V177.632653c0-22.987755-18.808163-41.795918-41.795919-41.795918H287.346939c-22.987755 0-41.795918 18.808163-41.795919 41.795918v240.326531zM736.653061 929.959184H287.346939c-45.97551 0-83.591837-37.616327-83.591837-83.591837v-114.938776h616.489796v114.938776c0 45.97551-37.616327 83.591837-83.591837 83.591837z m-491.102041-156.734694v73.142857c0 22.987755 18.808163 41.795918 41.795919 41.795918h449.306122c22.987755 0 41.795918-18.808163 41.795919-41.795918v-73.142857H245.55102z"
                  fill="#333333" p-id="7008"></path>
              <path
                  d="M846.367347 773.22449H177.632653c-45.97551 0-83.591837-37.616327-83.591837-83.591837V501.55102c0-45.97551 37.616327-83.591837 83.591837-83.591836h668.734694c45.97551 0 83.591837 37.616327 83.591837 83.591836v188.081633c0 45.97551-37.616327 83.591837-83.591837 83.591837zM177.632653 459.755102c-22.987755 0-41.795918 18.808163-41.795918 41.795918v188.081633c0 22.987755 18.808163 41.795918 41.795918 41.795918h668.734694c22.987755 0 41.795918-18.808163 41.795918-41.795918V501.55102c0-22.987755-18.808163-41.795918-41.795918-41.795918H177.632653zM694.857143 351.608163H329.142857c-11.493878 0-20.897959-9.404082-20.897959-20.897959s9.404082-20.897959 20.897959-20.897959h365.714286c11.493878 0 20.897959 9.404082 20.897959 20.897959s-9.404082 20.897959-20.897959 20.897959z"
                  fill="#333333" p-id="7009"></path>
              <path
                  d="M203.755102 665.077551v-139.493878h100.832653v16.195919H222.563265v42.840816h77.322449v16.195919H222.563265v47.542857H308.244898v16.195918H203.755102z"
                  fill="#333333" p-id="7010"></path>
              <path
                  d="M307.722449 667.689796H203.755102c-1.567347 0-2.612245-1.044898-2.612245-2.612245v-139.493878c0-1.567347 1.044898-2.612245 2.612245-2.612244h100.832653c1.567347 0 2.612245 1.044898 2.612245 2.612244v16.195919c0 1.567347-1.044898 2.612245-2.612245 2.612245H225.17551v37.616326h74.710204c1.567347 0 2.612245 1.044898 2.612245 2.612245v16.195919c0 1.567347-1.044898 2.612245-2.612245 2.612244H225.17551v42.318368H308.244898c1.567347 0 2.612245 1.044898 2.612245 2.612245v16.195918c-0.522449 2.089796-1.567347 3.134694-3.134694 3.134694z m-101.355102-5.22449h98.742857v-10.971428H222.563265c-1.567347 0-2.612245-1.044898-2.612245-2.612245v-47.542857c0-1.567347 1.044898-2.612245 2.612245-2.612245h74.710204v-10.971429H222.563265c-1.567347 0-2.612245-1.044898-2.612245-2.612245v-42.840816c0-1.567347 1.044898-2.612245 2.612245-2.612245h79.934694v-10.971429H206.367347v133.746939zM319.216327 665.077551l53.812244-72.620408-47.542857-66.87347h21.942857l25.077551 35.526531c5.22449 7.314286 8.881633 13.061224 10.971429 17.240816 3.134694-5.22449 6.791837-10.44898 10.971429-15.673469l28.212244-37.093878h19.853062l-49.110204 65.828572 52.767347 73.665306H423.183673l-35.004081-49.632653c-2.089796-2.612245-4.179592-5.746939-6.269388-9.404082-3.134694 5.22449-5.22449 8.359184-6.791837 10.44898l-35.004081 48.587755h-20.897959z"
                  fill="#333333" p-id="7011"></path>
              <path
                  d="M447.216327 667.689796h-22.987756c-1.044898 0-1.567347-0.522449-2.089795-1.044898l-35.004082-49.632653c-1.044898-2.089796-2.612245-3.657143-4.179592-5.746939-2.089796 3.134694-3.657143 5.746939-4.702041 6.791837l-35.004081 48.587755c-0.522449 0.522449-1.044898 1.044898-2.089796 1.044898h-21.942857c-1.044898 0-2.089796-0.522449-2.089796-1.567347s-0.522449-2.089796 0-2.612245l52.767347-71.053061-46.49796-65.306123c-0.522449-1.044898-0.522449-2.089796 0-2.612244 0.522449-1.044898 1.567347-1.567347 2.089796-1.567347h21.942857c1.044898 0 1.567347 0.522449 2.089796 1.044898l25.077551 35.52653c3.657143 5.22449 6.791837 9.926531 9.404082 13.583674 2.612245-4.179592 5.746939-8.359184 8.881633-12.538776l28.212245-37.093877c0.522449-0.522449 1.044898-1.044898 2.089795-1.044898h19.853062c1.044898 0 2.089796 0.522449 2.089796 1.567347 0.522449 1.044898 0.522449 2.089796 0 2.612244L397.061224 590.889796 449.306122 663.510204c0.522449 1.044898 0.522449 2.089796 0 2.612245-0.522449 1.044898-1.044898 1.567347-2.089795 1.567347z m-21.420409-5.22449h16.195919l-49.632653-69.485714c-0.522449-1.044898-0.522449-2.089796 0-3.134694l45.97551-61.64898h-13.583674L397.061224 564.244898c-4.179592 5.22449-7.836735 10.971429-10.971428 15.673469-0.522449 1.044898-1.044898 1.567347-2.089796 1.044898-1.044898 0-1.567347-0.522449-2.089796-1.567347-2.089796-3.657143-5.746939-9.404082-10.971428-16.718367l-24.555103-34.481633h-15.673469l44.408163 62.693878c0.522449 1.044898 0.522449 2.089796 0 3.134694l-50.677551 68.440816h15.67347l33.959183-47.542857c1.044898-2.089796 3.657143-5.22449 6.791837-10.44898 0.522449-0.522449 1.567347-1.044898 2.089796-1.044898 1.044898 0 1.567347 0.522449 2.089796 1.044898l6.269388 9.404082 34.481632 48.587755zM562.677551 616.489796l18.285714 4.702041c-3.657143 15.15102-10.971429 26.644898-20.897959 34.481632s-22.465306 12.016327-37.093877 12.016327c-15.15102 0-27.167347-3.134694-36.571429-9.404082-9.404082-6.269388-16.718367-15.15102-21.420408-26.644898-4.702041-11.493878-7.314286-24.032653-7.314286-37.616326 0-14.628571 2.612245-27.167347 8.359184-38.138776 5.746939-10.971429 13.583673-18.808163 23.510204-24.555102 10.44898-5.746939 21.420408-8.359184 33.959184-8.359183 14.106122 0 25.6 3.657143 35.004081 10.448979 9.404082 7.314286 16.195918 17.240816 19.853061 29.779592l-18.285714 4.179592c-3.134694-9.926531-7.836735-17.763265-14.106122-21.942857-6.269388-4.702041-14.106122-6.791837-22.987755-6.791837-10.44898 0-19.853061 2.612245-26.644898 7.836735-7.314286 5.22449-12.016327 12.016327-15.151021 20.897959-3.134694 8.881633-4.179592 17.763265-4.179592 26.644898 0 12.016327 1.567347 21.942857 5.22449 30.82449 3.657143 8.881633 8.881633 15.673469 16.195919 19.853061 7.314286 4.179592 15.15102 6.791837 23.510204 6.791837 10.44898 0 19.330612-3.134694 26.122449-8.881633 7.314286-5.746939 12.016327-14.628571 14.628571-26.122449z"
                  fill="#333333" p-id="7012"></path>
              <path
                  d="M523.493878 670.302041c-15.673469 0-28.212245-3.134694-38.138776-9.404082-9.926531-6.269388-17.240816-15.673469-22.465306-27.689796s-7.836735-24.555102-7.836735-38.138775c0-14.628571 3.134694-28.212245 8.359184-39.183674 5.746939-10.971429 14.106122-19.853061 24.555102-25.6 10.44898-5.746939 22.465306-8.881633 35.004082-8.881632 14.628571 0 26.644898 3.657143 36.571428 10.971428 9.926531 7.314286 16.718367 17.763265 20.897959 31.346939v2.089796c-0.522449 0.522449-1.044898 1.044898-1.567347 1.044898l-18.285714 4.179592c-1.567347 0.522449-2.612245-0.522449-3.134694-1.567347-3.134694-9.404082-7.314286-16.718367-13.061224-20.897959-5.746939-4.179592-13.061224-6.269388-21.420408-6.269388-9.926531 0-18.808163 2.612245-25.077551 7.314286-6.791837 4.702041-11.493878 11.493878-14.106123 19.330612-2.612245 8.359184-4.179592 17.240816-4.179592 26.122449 0 11.493878 1.567347 21.420408 5.22449 30.302041 3.134694 8.359184 8.359184 14.628571 15.15102 18.285714 6.791837 4.179592 14.106122 6.269388 22.465307 6.269388 9.404082 0 17.763265-2.612245 24.555102-8.359184 6.791837-5.746939 11.493878-14.106122 13.583673-25.077551 0-0.522449 0.522449-1.044898 1.044898-1.567347 0.522449-0.522449 1.567347-0.522449 2.089796-0.522449l18.285714 4.702041c0.522449 0 1.044898 0.522449 1.567347 1.044898 0.522449 0.522449 0.522449 1.567347 0.522449 2.089796-4.179592 15.673469-11.493878 27.689796-21.942857 36.048979-10.971429 7.836735-23.510204 12.016327-38.661224 12.016327z m0-144.195919c-12.016327 0-22.987755 2.612245-32.391837 7.836735-9.926531 5.22449-17.240816 13.061224-22.465306 23.510204s-7.836735 22.987755-7.836735 36.571429c0 13.061224 2.612245 25.077551 7.314286 36.571428 4.702041 10.971429 11.493878 19.853061 20.37551 25.6 8.881633 5.746939 20.897959 8.881633 35.004082 8.881633 13.583673 0 25.6-3.657143 35.004081-11.493878 8.881633-7.314286 15.673469-17.240816 19.330612-30.824489l-13.061224-3.134694c-2.612245 10.971429-7.836735 19.330612-14.628571 25.6-7.836735 6.269388-17.240816 9.404082-27.689796 9.404081-8.881633 0-17.240816-2.089796-25.077551-6.791836s-13.583673-12.016327-17.240817-20.897959c-3.657143-8.881633-5.22449-19.853061-5.22449-31.869388 0-9.404082 1.567347-18.808163 4.702041-27.689796 3.134694-9.404082 8.359184-16.718367 16.195919-21.942857s17.240816-8.359184 28.212245-8.359184c9.926531 0 18.285714 2.612245 24.555102 7.314286 6.269388 4.702041 10.971429 11.493878 14.106122 20.897959l13.061225-3.134694c-3.657143-10.971429-9.926531-19.853061-18.285715-26.122449-8.881633-6.269388-20.37551-9.926531-33.959183-9.926531z"
                  fill="#333333" p-id="7013"></path>
              <path
                  d="M604.473469 665.077551v-139.493878H705.306122v16.195919h-82.546938v42.840816H700.081633v16.195919h-77.322449v47.542857h85.681632v16.195918h-103.967347z"
                  fill="#333333" p-id="7014"></path>
              <path
                  d="M708.440816 667.689796h-103.967347c-1.567347 0-2.612245-1.044898-2.612245-2.612245v-139.493878c0-1.567347 1.044898-2.612245 2.612245-2.612244H705.306122c1.567347 0 2.612245 1.044898 2.612245 2.612244v16.195919c0 1.567347-1.044898 2.612245-2.612245 2.612245h-79.934693v37.616326H700.081633c1.567347 0 2.612245 1.044898 2.612245 2.612245v16.195919c0 1.567347-1.044898 2.612245-2.612245 2.612244h-74.710204v42.318368h83.069387c1.567347 0 2.612245 1.044898 2.612245 2.612245v16.195918c0 2.089796-1.567347 3.134694-2.612245 3.134694z m-101.355102-5.22449h98.742857v-10.971428h-83.069387c-1.567347 0-2.612245-1.044898-2.612245-2.612245v-47.542857c0-1.567347 1.044898-2.612245 2.612245-2.612245h74.710204v-10.971429h-74.710204c-1.567347 0-2.612245-1.044898-2.612245-2.612245v-42.840816c0-1.567347 1.044898-2.612245 2.612245-2.612245h79.934694v-10.971429h-95.608164v133.746939z"
                  fill="#333333" p-id="7015"></path>
              <path d="M732.995918 665.077551v-139.493878h18.285715v122.775511H820.244898v16.195918h-87.24898z"
                    fill="#333333" p-id="7016"></path>
              <path
                  d="M820.244898 667.689796h-87.24898c-1.567347 0-2.612245-1.044898-2.612245-2.612245v-139.493878c0-1.567347 1.044898-2.612245 2.612245-2.612244h18.285715c1.567347 0 2.612245 1.044898 2.612245 2.612244v120.163266H820.244898c1.567347 0 2.612245 1.044898 2.612245 2.612245v16.195918c0 2.089796-1.567347 3.134694-2.612245 3.134694z m-84.636735-5.22449h82.02449v-10.971428h-65.828571c-1.567347 0-2.612245-1.044898-2.612245-2.612245v-120.163266h-13.061225v133.746939z"
                  fill="#333333" p-id="7017"></path>
            </svg>
          </el-icon>
        </el-button>
      </el-button-group>
    </div>
  </div>
</template>

<style scoped>
.flex {
  justify-content: space-between;

  .right {
    gap: 2px;
  }
}
</style>